
<fluent-dialog id="xxx" class="fluent-dialog-main prevent-scroll" style="position: absolute; z-index: 999; top: 50%; left: 50%; --dialog-width: 500px; --dialog-height: 200px;" modal="true" trap-focus="true" blazor:ondialogdismiss="1" b-dsxskpj5rr="" blazor:elementreference="">
  <div class="stack-horizontal fluent-dialog-header" style="justify-content: start; align-items: start; column-gap: 10px; row-gap: 10px; width: 100%;" b-0nr62qx0mz="">
    <div style="width: 100%;" tabindex="0">
      <h4 typo="pane-header" class="fluent-typography" b-1nnnfjehkp="">Sample title as H2</h4>
    </div>
    <fluent-button type="button" id="xxx" appearance="stealth" blazor:onclick="8" aria-label="Close" b-x1200685t0="" blazor:elementreference="xxx">
      <svg style="width: 20px; fill: var(--neutral-foreground-rest);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onkeydown="11" blazor:onclick="12">
        <path d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"></path>
      </svg>
    </fluent-button>
    <fluent-tooltip anchor="xxx" delay="300" aria-label="Tooltip" position="bottom" role="tooltip" blazor:ontooltipdismiss="9" blazor:elementreference="xxx">
      <div style="max-width: 500px; text-wrap: wrap;">Close</div>
    </fluent-tooltip>
  </div>
  <div class="stack-horizontal fluent-dialog-footer" style="justify-content: end; align-items: end; column-gap: 10px; row-gap: 10px; width: 100%;" b-0nr62qx0mz="">
    <fluent-button type="button" appearance="accent" blazor:onclick="10" b-x1200685t0="" blazor:elementreference="xxx">Close</fluent-button>
  </div>
  <div class="fluent-dialog-body">
    My body
  </div>
</fluent-dialog>